<template>
	<view class="balance">
		<view class="content">
			<!-- 头部 -->
			<view class="header">
				<view class="minle">
					<text class="money">{{$toFiexd(data.money,2)}}</text>
					<!-- <text class="text">我的 {{data.wallet_type==1?"积分":(data.wallet_type==2?"贡献值凭证":'消费券')}}</text> -->
				</view>
			</view>
			<!-- 明细 -->
			<view class="detail">
				<view class="detailHder">
					<image src="https://pubuimg.cqguanjie.cn/chat/16948580779132"></image>
					<text>记录</text>
				</view>
				<!-- 空数据 -->
				<view class="empty" v-if="data.detailsList.length==0">
					<empty></empty>
				</view>
				<!-- 有钱包明细 -->
				<view class="moneys" v-else>
					<scroll-view style="height: 100%;" scroll-y @scrolltolower='records'>
						<view class="moneysFor" v-for="(item,index) in data.detailsList" :key="index">
							<view class="information">
								<text class="text" >{{data.walletList[item.detailed]}}</text>
								<view class="source">
									<!-- v-if="item.source.username" -->
									<!-- {{item.source.username}} -->
									<text v-if="item.source.username||item.source.mobile">来源：{{item.source.username||item.source.mobile}}</text>
								</view>
								<text class="date">{{$clearTime(item.CreatedAt)}}</text>
							</view>
							<view class="moneyl">
								<text>{{$toFiexd(item.money,2)}}</text>
								<view>剩余:{{$toFiexd(item.change_money,2)}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 底部提现，充值 -->
<!-- 			<view class="way">
				<text class="withdrawal" @click="$goURl('/pages/personal/wallet/withdrawal')">提现</text>
				<text class="recharge" @click="$goURl('/pages/personal/wallet/recharge')">转账</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		page:0,
		pages:1,
		size:10,
		wallet_type:'',//钱包类型
		detailsList:[],			//明细
		userInfo:{},			//用户信息
		walletList:{},			//钱包名称列表
		money:0,
		code:0
	})
	onLoad((option)=>{
		console.log('页面onLoad')
		data.wallet_type=option.wallet_type
		data.code=Number(option.code)
	})
	onShow(()=>{
		data.userInfo=uni.getStorageSync('userInfo')
		console.log('页面onShow')
		data.page=0
		data.pages=1
		data.detailsList=[]
		records()
		data.walletList = uni.getStorageSync('wallet')
	})
	function modes(){

	}
	function records(){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url: `api/agentRecord/?page=${data.page}&size=${data.size}&moon=${data.code}`,//0总 1消费券
				method: 'GET',
				success(res) {
					let datas = res.data.data
					if(data.code==1){
						data.money=res.data.moonTotalMoney
					}else{
						data.money=res.data.totalMoney

					}

					datas.forEach((ct)=>{
						data.detailsList.push(ct)
					})
					data.pages = Math.ceil(res.data.total / data.size)
					if (data.pages) {
						if(data.page==data.pages){
							data.loadmore = "nomore"
						}else{
							data.loadmore = "loading"
						}
					}else{
						data.loadmore = "nomore"
					}
				}
			})
		}
	}
	//滑动到底部/做上拉加载
	const scrolltolower=()=> {
		console.log("this.getgoods()");
	}
	// onReachBottom(()=>{
	// 	console.log('onReachBottom')
	// })
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		.header{
			width: 100%;
			height: 360rpx;
			background: url('https://pili-vod.guanxikeji.com/moban/img/1720060922484.png');
			background-repeat: round;
			display: flex;
			flex-direction: column;
			.minle{
				margin: 40px;
				display: flex;
				flex-direction: column;
				.money{
					margin-bottom: 10px;
					font-size: 32px;
					color: #fff;
					font-weight: 700;
				}
				.text{
					color: #f6f6f6;
					font-size: 14px;
				}
			}

		}
		.detail{
			width: 94%;
			background-color: #fff;
			margin: -40px auto 0 auto;
			padding: 20px 0;
			border-radius: 10px;
			.detailHder{
				width: 100%;
				image{
					width: 4px;
					height: 12px;
					margin: 0 4px 0 15px;
				}
				text{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
			}
			.empty{
			}
			.moneys{
				width: 100%;
				height: 545px;
				.moneysFor{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgb(245, 245, 245);
					padding: 15px;
					.information{
						display: flex;
						flex-direction: column;
						.text{
							color: #333;
							font-weight: 700;
							font-size: 13px;
						}
						.source{
							text{
								color: rgb(153, 153, 153);
								font-size: 14px;
							}
						}
						.date{
							color: rgb(153, 153, 153);
							font-size: 14px;
						}
					}
					.moneyl{
						text{
							color: #f4391c;
							font-size: 16px;
							font-weight: 700;
						}
						view{
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}
		.way{
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			text-align: center;
			display: flex;
			border-top: 1px solid #ccc;
			.withdrawal{
				width: 50%;
				background-color: #fff;
				display: block;
				padding: 30upx 0;
				font-size: 36rpx;
				color: #333333;
				font-weight: 700;
			}
			.recharge{
				width: 50%;
				display: block;
				padding: 30upx 0;
				color: #ffffff;
				font-weight: 700;
				font-size: 36rpx;
				background: linear-gradient(90deg,#ff1b4c, #e80001);
			}
		}
	}
</style>
